<template>
	<div class="ComparativeAnalysis_high">
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<div style="margin:5px 0px 0px 0px;padding: 20px;">
			<Row >
		        <Col span="24" style="text-align: left;">
					<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">考试名称:{{examName}}</span>
				</Col>
			</Row>
			<Row style="margin:15px 0px 0px 0px;color: #666666;">
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">入学年份：{{enrolYear}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">学年：{{schoolYear}}</span>
				</Col>
		        <Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">年级：{{gradeName}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">考试时间：{{examDate}}</span>
				</Col>
			</Row>
		</div>
		<hr style="margin:0px 40px 0px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
		
		
		<Row style="padding:35px 40px 0px 45px;">
	        <Col span="6" style="text-align: left;">
	        	<span style="font-size: 14px;">成绩类别:</span>
			    <Select v-model="scoreCategorySelect" style="width:150px;text-align: center;" @on-change="getAllChar">
			        <Option v-for="item in scoreCategoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>
	    
	        <!--<Col span="7" style="text-align: center;">
	        	<span style="font-size: 14px;">班级类型:</span>
			    <Select v-model="classTypeSelect" style="width:150px;text-align: center;" @on-change="getAllChar">
			        <Option v-for="item in classType" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>-->
	        
	        <!--<Col span="7" style="text-align: center;">
	        	<span style="font-size: 14px;">班级:</span>
			    <Select v-model="classselect" style="width:150px;text-align: center;" @on-change="getAllChar">
			        <Option v-for="item in classlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>-->
	    </Row>
	    <Row style="padding:35px 40px 0px 45px;">
	        <Col span="24" style="text-align: left;">
	        	<span style="font-size: 14px;">班级：</span>
	        	<!--<span style="padding-bottom:6px;margin-bottom:6px;">
			        <Checkbox
			            :value="checkAll"
			            @click.prevent.native="handleCheckAll"><span style="font-size: 14px;">全选</span></Checkbox>
			    </span>-->
	        	<CheckboxGroup  v-model="classselect"   @on-change="classchange">
	        		<Checkbox  v-for="item in classlist" :key="item.value" :label="item.value">{{item.label}}班</Checkbox>
			    </CheckboxGroup>
			   
	        </Col>
	    </Row>
	    
	    
	    
	    <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 18px;margin-left: 10px;">成绩列表</span>
		</Row >
		<Row style="text-align: left;margin-top: 10px;">
			<Col span="24" style="text-align: center;">
				<ButtonGroup >
			        <Button v-bind:class="[charOrBar == true?buttonActiveClass:'']" @click="toggleCharOrBar('char')">表格</Button>
			        <Button v-bind:class="[charOrBar == false?buttonActiveClass:'']" @click="toggleCharOrBar('bar')">柱状图</Button>
			    </ButtonGroup>
	       </Col>
		</Row >
		
		
	    <div v-show="charOrBar" style="min-height: 300px;">
			<Row style="margin:0 auto;margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:5px;color: #666666;border-radius: 12px;background-color: #f0f8ff;">
		        <Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">班级</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">参加考试人数</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">最高分</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">最低分</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">平均分</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">优秀率</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">及格率</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">低分率</span>
				</Col>
				
			</Row>
			<Row  class="hoverclass"  v-for="item in classesResult" :key="item.subjectName" style="margin:0 auto;color: #666666;margin: 5px 20px 5px 20px;padding:5px 0px 5px 0px;border-bottom: 1px solid rgb(240, 248, 255);">
		        <div  style="cursor: pointer;">
			        <Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.className}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.actualExamNum}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.maxResult}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.minResult}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.average}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.excellentRate}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.passRate}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.lowScoreRate}}&nbsp;</span>
					</Col>
				</div>
			</Row>
	    </div>
	    <Row v-show="!charOrBar" style="text-align: left;margin-top: 20px;">
		        <Col span="23" style="text-align: left;margin-left:48px;">
			        <span>类型筛选：</span>
		        	<RadioGroup  v-model="scoreTypeSelect" type="button" @on-change="scoreTypeSelectChange">
		        		<Radio v-for="item in scoreTypelist" :key="item.value" :label="item.value">{{item.label}}</Radio>
				       
				    </RadioGroup>
		        </Col>
			</Row >
	    <div v-show="!charOrBar">
			<Row style="text-align: left;margin-top: 5px;margin-bottom: 50px;">
				<div id="myChart" ref="bar_classesScore" :style="{width: '95%', height: '450px'}"></div>
			</Row >
		</div>
	    
	    
	    
	    
		<Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 18px;margin-left: 10px;">成绩分档对比</span>
		</Row >
		<Row  style="text-align: left;margin-top: 10px;margin-bottom: 10px;">
	        <Col span="23" style="text-align: left;margin-left:48px;">
		        <span>分数筛选：</span>
	        	<RadioGroup  v-model="scoreselect" type="button" @on-change="scorechangeselect">
	        		<Radio v-for="item in scorelist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			       
			    </RadioGroup>
	        </Col>
		</Row >
		<Row style="text-align: left;margin-top: 0px;padding-bottom: 20px;">
			
			<div id="myChart" ref="bar_result" :style="{width: '98%', height: '250px',margin:'0 auto'}"></div>
		</Row >
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import { setsessionstorage,getsessionstorage } from '@/components/js/Localstorage'
	export default{
		data(){
			return{
				examName:"",
				enrolYear:"",
				schoolYear:"",
				gradeName:"",
				examDate:"",
				
				scoreCategorySelect:"",			//成绩类别
//				classTypeSelect:"",				//选择班级的select
//				checkAll: false,
				classselect:[],				//选择班级的select
				scoreselect:"",
				
				scoreCategoryList:[],
//				classType: [],

				classlist: [],
				scorelist:[],
				
				classesResult:[],
				charOrBar:true,
				scoreTypeSelect:"1",
				scoreTypelist:[
					{value: '1',label: '平均分'},
					{value: '2',label: '优秀率'},
					{value: '3',label: '及格率'},
					{value: '4',label: '最高分'},
					{value: '5',label: '最低分'},
					{value: '6',label: '低分率'},
				],
				
				
				
				//柱状图
				bar_classesScore:{
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '2%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				        	splitLine:{show: false},//去除网格线
				            type : 'category',
				            data : "",
//				            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            },
				            axisLabel: {
                                           interval:0,
                                           rotate:-40
                                       }
				            
				        }
				    ],
				    yAxis : [
				        {
				        	name : '',
//				        	splitLine:{show: false},//去除网格线
				            type : 'value',
				            axisLabel:{
				            	textStyle: {
			                    	fontSize: 16 ,
			                   	},
				            	formatter:'{value}'
				            },
				            
				        }
				    ],
				    series : [
				        {
				            name:'数据',
				            type:'bar',
				            barWidth: '20%',
				            data:"",
//				            data:[10, 52, 200, 334, 390, 330, 220,100, 152, 200, 334, 390, 330, 220]
							label: {
					            "normal": {
					                "show": true,
					                "textStyle": {
					                    "fontSize": 12
					                },
					                formatter:'{c}'
					            },
							},
				        }
				    ]
				},
				
				
				bardata_result:{
				    legend: {},
				    tooltip: {},
				    dataset: {
//				        dimensions: ['name', '2015', '2016', '2017'],
//				        source: [
//				            {name: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
//				            {name: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
//				            {name: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
//				            {name: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
//				        ]
				    },
				    xAxis: {type: 'category'},
				    yAxis: {},
				    // Declare several bar series, each will be mapped
				    // to a column of dataset.source by default.
				    series: [
				        {type: 'bar'},
//				        {type: 'bar'},
//				        {type: 'bar'}
				    ]
				}
			}
		},
		computed:{
			buttonActiveClass: function() {
				return 'active';
			},
        },
		created(){
			this.getscoreCategoryList()
			this.examName = getsessionstorage('quality_high_examName')
			this.enrolYear = getsessionstorage('quality_high_enrolYear')
			this.schoolYear = getsessionstorage('quality_high_schoolYear')
			this.gradeName = getsessionstorage('quality_high_gradeName')
			this.examDate = getsessionstorage('quality_high_examDate')
		},
		mounted() {
//      	
        },
		methods:{
//			iview的checkbox处理示例
//			handleCheckAll:function() {
//              if (this.checkAll) {
//                  this.checkAll = false;
//              } else {
//                  this.checkAll = !this.checkAll;
//              }
////              this.indeterminate = false;
//
//              if (this.checkAll) {
//              	this.classselect = [];
//					for(let i = 0;i<this.classlist.length;i++){
//						this.classselect.push(this.classlist[i].value)
//					}
////                  this.classselect = ['香蕉', '苹果', '西瓜'];
//              } else {
//                  this.classselect = [];
//              }
//          },
            classchange:function(data) {
//              if (data.length === this.classlist.length) {
////                  this.indeterminate = false;
//                  this.checkAll = true;
//              } else if (data.length > 0) {
////                  this.indeterminate = true;
//                  this.checkAll = false;
//              } else {
////                  this.indeterminate = false;
//                  this.checkAll = false;
//              }
                this.getSquaBaseDataAnalysis()
           		this.getSquaBaseDataAnalysis_bar()
           		this.getsecoreList()
//         		this.getBrcaketScore()
            },
			drawBar_classesScore() {
            	this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.bar_classesScore,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.bar_classesScore);
                })
            },
			drawLine_min() {
        		this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.bar_result,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.bardata_result);
                })
           	},
           	toggleCharOrBar:function(value){
           		if(value == 'char'){
           			this.charOrBar = true;
           		}else if(value == 'bar'){
           			this.charOrBar = false;
           			this.$nextTick(function () {
           				let myChart = this.$echarts.init(this.$refs.bar_classesScore,'hengyi')
		                myChart.clear();
		                myChart.setOption(this.bar_classesScore);
		                myChart.resize();
           			})
           			
           		}
           	},
           	getAllChar:function(){
           		this.getSquaBaseDataAnalysis()
           		this.getSquaBaseDataAnalysis_bar()
           		this.getsecoreList()
//         		this.getBrcaketScore()
           	},
           	
            //获取成绩类别列表
			getscoreCategoryList:function(){
//         		this.gradelistshow = true;
           		var self = this;
           		let sessionroleid = getsessionstorage('roleid');
           		let sessiongradeId = getsessionstorage('quality_high_gradeId');
           		let sessionisBranch = getsessionstorage('quality_high_isBranch');
           		var sendData = {
					gradeId:sessiongradeId,
					isBlanck:sessionisBranch,
					roleId:sessionroleid,
				}
            	let url = api.apidomain+'/tqes/web/squaAnalysis/getQuerySubject';
            	this.$http.post(url,sendData).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.scoreCategoryList = response.data.data
						if(self.scoreCategoryList.length != 0){
							self.scoreCategorySelect = self.scoreCategoryList[0].value;
						}
						self.getclasslist()
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00246',
							duration: 10,
							closable: true
						});
					});
           	},
           	//获取班级级选择列表
//         	getclassType:function(){
////         		this.classTypeshow = true;
////				let sessiongradeId = getsessionstorage('quality_high_gradeId');
////				let sessionisBranch = getsessionstorage('quality_high_isBranch');
////				let sessionroleid = getsessionstorage('roleid');
//         		var self = this;
//          	let url = api.apidomain+'/tqes/web/squaAnalysis/getBranchTypeList';
//          	this.$http.post(url).then(function(response) {
//					if(response.data.success == true){
////						console.log(response.data.data)
//						self.classType = response.data.data
//						if(self.classType.length != 0){
//							self.classTypeSelect = self.classType[0].value;
//						}
//						self.getclasslist()
//		            }else if(response.data.success == false){
//	            		self.$Message.error({
//							content: response.data.msg,
//							duration: 10,
//							closable: true
//						});
//	            	}
//					})
//					.catch(function(error) {
//						self.$Message.error({
//							content: '系统发生错误：错误码00247',
//							duration: 10,
//							closable: true
//						});
//					});
//         	},
           	//获取班级级选择列表
           	getclasslist:function(){
//         		this.classlistshow = true;
				let sessiongradeId = getsessionstorage('quality_high_gradeId');
				let sessionisBranch = getsessionstorage('quality_high_isBranch');
				let sessionroleid = getsessionstorage('roleid');
           		var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysis/getQueryClassesContainBranch';
            	this.$http.post(url, {"gradeId":sessiongradeId,"roleId":sessionroleid,"isBranch":sessionisBranch}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.classlist = response.data.data
						if(self.classlist.length != 0){
							self.classselect.push(self.classlist[0].value);
						}
						self.getSquaBaseDataAnalysis()
						self.getSquaBaseDataAnalysis_bar()
						self.getsecoreList()
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00247',
							duration: 10,
							closable: true
						});
					});
           	},
           	
           	getSquaBaseDataAnalysis:function(){
           		var self = this;
                let sessiongradeId = getsessionstorage('quality_high_gradeId');
                let sessionisBranch = getsessionstorage('quality_high_isBranch');
                let sessiongqualityanalysisId = getsessionstorage('quality_high_analysisId');
                let url = api.apidomain +'/tqes/web/squaAnalysisScoreQuery/getSquaBaseDataAnalysis';
                this.$http.post(url, {
                        "gradeId": sessiongradeId,
                        "classesIds":this.classselect,
                        "subjectId":this.scoreCategorySelect,
                        "analysisId":sessiongqualityanalysisId,
                        "isBranch":sessionisBranch
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.classesResult = response.data.data
                        } else if(response.data.success == false) {
                            self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
                        }

                    })
                    .catch(function(error) {
                        self.$Message.error({
							content: '系统发生错误：错误码00248',
							duration: 10,
							closable: true
						});
                    });
           	},
           	scoreTypeSelectChange:function(){
           		this.getSquaBaseDataAnalysis_bar()
           	},
           	getSquaBaseDataAnalysis_bar:function(){
           		var self = this;
                let sessiongradeId = getsessionstorage('quality_high_gradeId');
                let sessionisBranch = getsessionstorage('quality_high_isBranch');
                let sessiongqualityanalysisId = getsessionstorage('quality_high_analysisId');
                let url = api.apidomain +'/tqes/web/squaAnalysisScoreQuery/getSquaBaseDataAnalysisColumnar';
                this.$http.post(url, {
                        "gradeId": sessiongradeId,
                        "classesIds":this.classselect,
                        "subjectId":this.scoreCategorySelect,
                        "analysisId":sessiongqualityanalysisId,
                        "isBranch":sessionisBranch,
                        "statisticsType":this.scoreTypeSelect
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                            self.bar_classesScore.xAxis[0].data = response.data.data.nameList;
							self.bar_classesScore.series[0].data = response.data.data.valueList; 
	//						//$nexttick为了使tch = true生效（dom）变化后再执行drawline，这样才不会有报错误
							self.$nextTick(function () {
								self.drawBar_classesScore()
							})
                        } else if(response.data.success == false) {
                            self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
                        }

                    })
                    .catch(function(error) {
                        self.$Message.error({
							content: '系统发生错误：错误码00248',
							duration: 10,
							closable: true
						});
                    });
           	},
           	getsecoreList:function(){
           		var self = this;
                let sessiongradeId = getsessionstorage('quality_high_gradeId');
                let sessionisBranch = getsessionstorage('quality_high_isBranch');
                let sessiongqualityanalysisId = getsessionstorage('quality_high_analysisId');
                let url = api.apidomain +'/tqes/web/squaAnalysisScoreQuery/getSquaGradingDefineSelectList';
                this.$http.post(url, {
                        "gradeId": sessiongradeId,
                        "classesIds":this.classselect,
                        "subjectId":this.scoreCategorySelect,
                        "analysisId":sessiongqualityanalysisId,
                        "isBranch":sessionisBranch,
                        "type":"2"
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
							
                            self.scorelist = response.data.data
							if(self.scorelist.length != 0){
								self.scoreselect = self.scorelist[0].value;
							}
							self.getBrcaketScore()
                        } else if(response.data.success == false) {
                            self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
                        }

                    })
                    .catch(function(error) {
                        self.$Message.error({
							content: '系统发生错误：错误码00248',
							duration: 10,
							closable: true
						});
                    });
           	},
           	scorechangeselect:function(){
           		this.getBrcaketScore()
           	},
           	getBrcaketScore:function(){
           		var self = this;
                let sessiongradeId = getsessionstorage('quality_high_gradeId');
                let sessionisBranch = getsessionstorage('quality_high_isBranch');
                let sessiongqualityanalysisId = getsessionstorage('quality_high_analysisId');
                let url = api.apidomain +'/tqes/web/squaAnalysisScoreQuery/getSquaGradingDataAnalysisColumnar';
                this.$http.post(url, {
                        "gradeId": sessiongradeId,
                        "classesIds":this.classselect,
                        "subjectId":this.scoreCategorySelect,
                        "analysisId":sessiongqualityanalysisId,
                        "isBranch":sessionisBranch,
                        "type":"2",
                        "define":this.scoreselect
                    }).then(function(response) {
                        if(response.data.success == true) {
//                          console.log(response.data.data)
                           	self.bardata_result.dataset = response.data.data
                           	self.bardata_result.series = [];
                           	if(response.data.data.dimensions.length != 0){
                           		for(let i = 1;i<response.data.data.dimensions.length;i++){
	                           		self.bardata_result.series.push({type: 'bar'});
	                           	}
                           	}else{
                           		self.bardata_result.series = [];
                           	}
//							self.$nextTick(function () {
								self.drawLine_min()
//							})
                        } else if(response.data.success == false) {
                            self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
                        }

                    })
                    .catch(function(error) {
                        self.$Message.error({
							content: '系统发生错误：错误码00248',
							duration: 10,
							closable: true
						});
                    });
           	}
		},
//		watch:{
//			scoreCategorySelect:function(){
//				if(this.classTypeSelect != "" && this.scoreCategorySelect != ""){
//					
//				}
//			},
//			classTypeSelect:function(){
//				if(this.classTypeSelect != "" && this.scoreCategorySelect != ""){
//					
//				}
//			},
//		}
	}
</script>

<style lang="css" scoped>
	
	.ComparativeAnalysis_high >>> .hoverclass:hover{
		background-color:rgb(245, 245, 245);
	}
	.ComparativeAnalysis_high >>> .active{
		background-color: #517EDB;
		color: white;
	}
	.ComparativeAnalysis_high >>> .ivu-checkbox-group{
		display: inline-block;
	}
	.ComparativeAnalysis_high >>> .ivu-checkbox-group-item{
		display: inline-block;
    	font-size: 14px;
	}
</style>